<template>
  <div class="carts">
    <div class="cart">
      <div class="cart-list" v-if="cart.length > 0">
        <van-swipe-cell v-for="(cart, index) in cart" :key="index">
          <div class="content">
            <div class="cart-l">
              <van-checkbox
                :value="cart.id"
                v-model="cart.isShow"
                @click="getStatus"
              ></van-checkbox>
            </div>
            <van-card
              :price="cart.price + '.00'"
              desc="描述信息"
              :title="cart.title"
              class="goods-card cart-r"
              :thumb="cart.src"
            >
              <template #num>
                <van-stepper v-model="cart.count" @change="upDate" />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(cart.id)"
            />
          </template>
        </van-swipe-cell>
      </div>
      <div class="null" v-else>购物车还是空的,快去挑选物品吧!</div>
    </div>
    <van-submit-bar
      :price="allPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="istoggleAll" @click="toggleAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      selected: [],
      istoggleAll: this.$store.state.carts.istoggleAll,
      value: 1,
      cart: this.$store.state.goods.cart
    }
  },
  created() {
    this.getStatus()
    this.postDate()
    // console.log(this.istoggleAll)
  },
  methods: {
    onSubmit() {
      console.log(this.$store.state.goods)
    },
    getStatus() {
      const res = this.cart.every(item => {
        return item.isShow === true
      })
      this.istoggleAll = res
      localStorage.carts = JSON.stringify(this.cart)
      if (this.cart.length === 0 || this.cart === '[]') {
        this.istoggleAll = false
      }
    },
    postDate() {
      this.$store.commit('carts/POST_DATE', this.cart)
    },
    toggleAll() {
      if (this.istoggleAll) {
        this.$store.state.carts.cartlists.forEach(item => {
          item.isShow = true
        })
      } else {
        this.$store.state.carts.cartlists.forEach(item => {
          item.isShow = false
        })
      }
      localStorage.carts = JSON.stringify(this.$store.state.carts.cartlists)
    },
    del(id) {
      this.$store.commit('carts/DEL', id)
    },
    upDate() {
      localStorage.carts = JSON.stringify(this.$store.state.carts.cartlists)
    }
  },
  computed: {
    ...mapGetters({
      allPrice: 'carts/getAllPrice'
    })
  }
}
</script>
<style lang="scss" scoped>
.carts {
  padding: 12px 0px;
  background: #cccccc30;
  height: 100%;
  .cart {
    background: rgb(241, 238, 238);
    .cart-list {
      .content {
        display: flex;
        align-items: center;
        padding: 0 12px;
        margin-bottom: 10px;
        background: white;
        .cart-l {
          flex: 0.2;
          text-align: center;
        }
        .goods-card {
          margin: 0;
        }
        .cart-r {
          flex: 1.8;
          padding: 10px 2px;
        }
      }
      .van-card__price {
        color: #f60;
      }
      .delete-button {
        height: 100%;
      }
    }
  }
  .null {
    height: 500px;
  }
  .van-submit-bar {
    position: fixed;
    bottom: 50px;
    left: 0;
    z-index: 100;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    user-select: none;
  }
}
</style>